import React from 'react';

import './static/css/collection.css';

import {Link} from 'react-router';

class Collection extends React.Component{
    constructor(props){
        super(props);
        this.state={
        	clist:[],
        	userid:JSON.parse(sessionStorage.getItem("user_info"))._id
        }
    }
	componentWillMount(){//页面渲染前给clist赋值才能将数据渲染到页面中
		 var lists=JSON.parse(localStorage.getItem("collectlist"));  //将当前用户的收藏push到list中
		
                for(var i=0;i<lists.length;i++){
                    if(lists[i].aid==this.state.userid){
                    	this.setState=({
                    		clist:this.state.clist.push(lists[i])
                    	})
                    }
              	}
	}
    componentDidMount(){
        var nav = document.getElementById('nav1');
				var list = document.getElementById('list')
				nav.onclick = function(){
					
					if(list.style.display == 'block'){
						
						list.style.display = 'none';
						
					}else{
						
						list.style.display = 'block'
					}
					
				}
    
    }
    render(){
        return(
            <div>
                <div className='header4'>
			<div className='back'>
				<Link to="/Mine">
					<i className='iconfont'>&#xe640;</i>
				</Link>	
			</div>
			<span className='title'>收藏夹</span>
			<div className='right'>
				<a className="edit tubiao">
					
					
						<i className='iconfont'>&#xe618;</i>
						<span>编辑</span>

				</a>
				<a className='nav1 tubiao' id='nav1'>
					<i className='iconfont'>&#xe60e;</i>
					<span>导航</span>
				</a>
				
				 <ul className='navList1' id='list'>
          					<li>
                    			<Link to="/home">
                      				<i className='iconfont'>&#xe6ee;</i>首页
                    			</Link>
                  			</li>
                  			<li>
                    			<Link to="/mine">
                      				<i className='iconfont'>&#xe60f;</i>我的
                    			</Link>
                  			</li>
                  			<li>
                    			<Link to="/search">
                      				<i className='iconfont'>&#xe600;</i>搜索
                      			</Link>
                  			</li>
            	</ul>
			</div>
		</div>
		<div className='btn-wrapper'>
			
			<ul className='tab'>
				<li className="active">
					<a href='#'>
						团购(
						<span className='number'>2</span>
						)
					</a>
				</li>
				<li>
					<a href='#'>
						商家(
						<span className='number'>0</span>
						)
					</a>
				</li>
			</ul>
		</div>
		<div className='list'>

			<ul>
	{this.state.clist.map(function(value,key){
                 
	return <li key={key}> <a href="#">
            		<img src={`http://127.0.0.1:2000/${value.img}`} alt=""/>
            		<div className='right'>
						<div className='right-inner'>
							<div className='title'>{value.title}</div>
							<div className='text'>{value.title}</div>
							<div className='price'>
								<span className='strong'>{value.price}</span>
								<span className='strong-text'>元</span>
								<span className='storePri'>门市价:{value.old_price}元</span>
								<span className='sold'>已售4798</span>
							</div>
						</div>
							
					</div>
				</a>
			</li>
    })}
			</ul>
		</div>
		<div className="footer">
			<div className="footer-bar">
				<a href="#" className="login">用户名zhangsan</a>
				
				<div className="city">
					<span>城市：</span>
					<a href="#" className="sz">深圳</a>
				</div>
			</div>
			<div className="footer-nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">订单</a></li>
					<li><a href="#">客户端</a></li>
					<li><a href="#">电脑版</a></li>
					<li><a href="#">帮助</a></li>
				</ul>
			</div>
			<div className="footer-links">
				<span>友情链接:</span>
				<a href="#">猫眼电影</a>
				<a href="#">大众点评</a>
				<a href="#">大众点评下载</a>
			</div>
			<div className="footer-copyright">
				<div className="hr"></div>
				<span>
					©2017 美团网 
					<a href="#">京ICP证070791号</a>
				</span>
			</div>
		</div>
	
            </div>
        )
    }
}

export default Collection;